<template>
    <el-container id="api-box">
        <el-aside :width="width + 'px'">
            <serviceItem :item="localData" :activeEvent="activeEvent" :class="{'active' : localData.serviceId == active}">
            </serviceItem>
            <!-- <div class="buttonBox">
                <el-button class="addButton" type="primary" icon="el-icon-plus" size="mini" @click="newService = true"
                    circle></el-button>
            </div> -->
        </el-aside>
        <el-container style="position: relative;">
            <el-main style="padding: 0;">
                <serviceDetail v-for="item in serviceObject" :detail="item" v-if="active == item.serviceId" :key="item.serviceId">
                </serviceDetail>
            </el-main>
        </el-container>
        <div class="moveBar" :style="{'left' : width - 3 + 'px'}" @mousedown="mousedown($event)"></div>
        <el-drawer title="新建服务器连接" size="400px" :visible.sync="newService" destroy-on-close>
            <serviceForm></serviceForm>
        </el-drawer>
    </el-container>
</template>
<script>
    import serviceItem from '@/components/service/item'
    import serviceDetail from '@/components/service/detail/index'
    import service from '@/action/service/index'
    import serviceForm from '@/components/service/form'

    export default {
        components: {
            serviceItem,
            serviceDetail,
            serviceForm,
        },
        data() {
            return {
                active: null,
                localData: {
                    serviceId: 'root',
                    title: '本地服务',
                    ip: window.DB.fileFullPath,
                    unDelete: true,
                    unEdit: true,
                },
                newService: false,
                width: 200,
                serviceObject: [],
            }
        },
        mounted() {
            const customTitlebar = require('custom-electron-titlebar');
            let titlebar = new customTitlebar.Titlebar({
                backgroundColor: customTitlebar.Color.fromHex('#eee'),
                enableMnemonics: false,
            });
            titlebar.titlebar.style.zIndex = '40';
            titlebar.title.style.flex = '1 1 auto';
            titlebar.title.style.paddingLeft = '10px';
            titlebar.menubarContainer.style.display = 'none'
            titlebar.updateTitle(`  Requester - 服务器列表`);
            window.action = service.service;
            this.serviceObject.push(this.localData);
        },
        methods: {
            getService() {

            },
            mousedown() {
                document.body.style.cursor = 'col-resize';
                document.onmousemove = (event) => {
                    let left = event.clientX;
                    if (left < 200) {
                        left = 200
                    } else if (left > document.body.clientWidth - 400) {
                        left = document.body.clientWidth - 400
                    }
                    this.width = left;
                };
                document.onmouseup = () => {
                    document.body.style.cursor = '';
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            },
            activeEvent(id) {
                if (this.active == id) {
                    this.active = null;
                } else {
                    this.active = id;
                };
            },
        },
    }
</script>
<style scoped>
    .el-container {
        position: absolute;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .el-main {
        background-image: url('~@/assets/title.png');
        background-position: center center;
        background-repeat: no-repeat;
    }

    .el-aside {
        position: relative;
        width: 300px;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        border-right: 1px solid #eee;
        padding: 0 0 70px 0;
    }

    .moveBar {
        width: 5px;
        height: 100%;
        position: absolute;
        opacity: 0.4;
        top: 0;
    }

    .moveBar:active {
        background: #ccc;
    }

    .moveBar:hover {
        cursor: col-resize;
        background: #ccc;
    }

    .setviceItem {
        border-bottom: 1px solid #eee;
        line-height: 40px;
        padding: 10px;
    }

    .buttonBox {
        width: 100%;
        position: absolute;
        bottom: 0;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }
</style>